<!-- 专题 -->
<template>
  <div class="topicPage basePageBox" v-loading="loading">
    <Search
      ref="search"
      :topiceTypeList="topiceTypeList"
      :topicList="topicList"
      :sortVal="sortVal"
      @changeSort="changeSort"
      @changeType="changeType"
    ></Search>

    <div class="pagination" v-if="topicList.length">
      <CustomPagination
        layout="prev, pager, next"
        :total-items="totalItems"
        :page-size="searchForm.pageSize"
        :current-page="searchForm.pageNum"
        @pagination-current-change="handleCurrentChange"
      ></CustomPagination>
    </div>
    <el-empty v-if="!topicList.length" description="暂无数据"></el-empty>
  </div>
</template>

<script>
import Search from "./components/search";
import CustomPagination from "@/components/CustomPagination.vue";
import { getTopicTypes } from "@/api/topic";
import { mapActions } from "vuex";
export default {
  name: "Topic",
  components: {
    Search,
    CustomPagination,
  },
  data() {
    return {
      topiceTypeList: [], // 专题分类
      topicList: [], // 专题列表
      // 筛选数据
      sortData: [
        {
          name: "综合排序",
          value: "ALL",
        },
        {
          name: "最新",
          value: "CREATE_TIME",
        },
        {
          name: "最热",
          value: "JOINS",
        },
      ],
      sortVal: "ALL",
      categoryId: "ALL",
      name: "",
      activeId: "",
      // 分页
      totalItems: 0,
      searchForm: {
        pageNum: 1,
        pageSize: 16,
      },
      loading: true
    };
  },
  mounted() {
    this.getType();
    setTimeout(() => {
      this.getTopicTypeList();
    }, 500);
    this.$bus.$on("emitNavPageSearch", () => {
      this.searchForm.pageNum = 1;
      this.getTopicTypeList();
    });
  },
  beforeDestroy() {
    this.$bus.$off("emitNavPageSearch");
  },
  methods: {
    ...mapActions(["getAllType"]),
    // 获取分类
    async getType() {
      try {
        const resData = await this.getAllType({ type: "TOPIC" });
        // this.tagTabsData = resData;
        this.$refs.search.activeName = resData[0].objectId;
        this.topiceTypeList = resData;
        this.activeId = resData[0].objectId;
      } catch (error) {
        console.error(error);
      }
    },

    // 获取专题列表
    async getTopicTypeList() {
      try {
        this.loading = true;
        let params = {
          //  categoryId:
          //     this.$refs.filterArea.filterData[0].selectVal === 'ALL'
          //       ? undefined
          //       : this.$refs.filterArea.filterData[0].selectVal, // 分类ID
          orderBy: this.sortVal === "ALL" ? undefined : this.sortVal, // 分类ID
          name: this.$store.state.app.searchKey || "",
          pid: this.activeId,
          ...this.searchForm,
        };
        const resData = await getTopicTypes(params);
        this.topicList = resData?.list || [];
        this.loading = false;
        console.log(resData);
      } catch (error) {
        this.loading = false;
        console.error(error);
      }
    },
    // 改变排序
    changeSort(val) {
      console.log(1, val);
      this.sortVal = val;
      this.getTopicTypeList();
    },
    // 改变分类
    changeType(val) {
      this.activeId = val;
      this.sortVal = "ALL";
      this.getTopicTypeList();
    },
    handleCurrentChange() {
      console.log(this.searchForm.pageNum);
      this.getTopicTypeList();
    },
  },
};
</script>

<style lang="scss" scoped>
.topicPage {
  box-sizing: border-box;
  padding: 30px;
}
.pagination {
  background-color: #fff; /* 举例背景色 */
  padding: 14px; /* 举例内边距 */
  text-align: center;
  margin-bottom: 64px;
}
</style>
